// Element Plus 主题定制
// 根据 CLAUDE.md 中的设计规范配置

:root {
  // 主色调配置
  --el-color-primary: #4ECDC4;
  --el-color-primary-light-3: rgba(78, 205, 196, 0.7);
  --el-color-primary-light-5: rgba(78, 205, 196, 0.5);
  --el-color-primary-light-7: rgba(78, 205, 196, 0.3);
  --el-color-primary-light-8: rgba(78, 205, 196, 0.2);
  --el-color-primary-light-9: rgba(78, 205, 196, 0.1);
  --el-color-primary-dark-2: #3BB5B0;

  // 状态色彩
  --el-color-success: #27AE60;
  --el-color-warning: #F39C12;
  --el-color-danger: #E74C3C;
  --el-color-info: #3498DB;

  // 边框圆角
  --el-border-radius-base: 16px;
  --el-border-radius-small: 12px;
  --el-border-radius-round: 24px;

  // 字体配置
  --el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  // 阴影效果
  --el-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  --el-box-shadow-light: 0 0 60px rgba(255, 255, 255, 0.1);
  --el-box-shadow-dark: 0 4px 8px rgba(102, 126, 234, 0.3);

  // 毛玻璃效果相关
  --backdrop-blur: blur(25px);
  --glass-background: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.4);
}

// Element Plus 组件样式定制
.el-button {
  border-radius: var(--el-border-radius-base);
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
  }

  &.el-button--primary {
    background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-dark-2) 100%);
    border: none;
    box-shadow: var(--el-box-shadow-light);
  }
}

.el-card {
  border-radius: var(--el-border-radius-round);
  background: var(--glass-background);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--el-box-shadow), var(--el-box-shadow-light);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    transform: translateY(-8px) scale(1.02);
  }
}

.el-input {
  .el-input__wrapper {
    border-radius: var(--el-border-radius-base);
    backdrop-filter: var(--backdrop-blur);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

.el-table {
  background: var(--glass-background);
  backdrop-filter: var(--backdrop-blur);
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--glass-border);
  
  .el-table__header {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .el-table__row {
    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}

// 渐变文字效果
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

// 状态色彩标签
.status-tag {
  &.status-progress {
    background: var(--el-color-primary);
    color: white;
  }
  
  &.status-warning {
    background: var(--el-color-warning);
    color: white;
  }
  
  &.status-danger {
    background: var(--el-color-danger);
    color: white;
  }
  
  &.status-success {
    background: var(--el-color-success);
    color: white;
  }
  
  &.status-offline {
    background: #95A5A6;
    color: white;
  }
}